import cls from './HeaderDesktop.module.scss'
import { AppLink } from 'shared/UI/AppLink/AppLink'
import { Button, ButtonTheme } from 'shared/UI/Button/Button'
import SidebarToggler from 'shared/assets/IoMenu.svg'
import Logo from 'shared/assets/IoCompass.svg'
import { useTranslation } from 'react-i18next'

interface HeaderDesktopProps {
    className?: string,
    navigationStateSetter: () => void
}
export default ({ className, navigationStateSetter }: HeaderDesktopProps) => {
    const { t } = useTranslation('header')

    return (
        <>
        
            <div className={cls.navs}>
                <Button
                    theme={ButtonTheme.CLEAR}
                    className={cls.icon}
                    onClick={navigationStateSetter}
                    data-testid="sidebar-toggler"
                >
                    <SidebarToggler />
                </Button>
                <AppLink to="/">
                    <Logo className={cls.icon} />
                    <h1>{t('service_name')}</h1>
                </AppLink>
            </div>
            <div className={cls.authbtns}>
                <Button theme={ButtonTheme.BASIC}>
                    {t("log_btn")}
                </Button>
                <Button theme={ButtonTheme.BASIC}>
                    {t("reg_btn")}
                </Button>
            </div>
        </>
    )
}
